<template>
  <div id="goodsSkuManage">
    <el-card v-show="viewInfoVisible" shadow="never">
      <el-row :gutter="12">
        <el-col :span="4">
          <el-image
            :preview-src-list="goodsInfo?.mainImages || []"
            :src="goodsInfo?.mainImages[0]"
            preview-teleported
            style="width: 150px; border-radius: 10px"
          />
        </el-col>
        <el-col :span="19">
          <el-descriptions
            :column="2"
            border
            class="margin-top"
            size="small"
            title="商品基本信息"
          >
            <el-descriptions-item
              :label-width="100"
              align="center"
              label="商品名"
            >
              <el-text> {{ goodsInfo?.goodsName }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item
              :label-width="100"
              align="center"
              label="上架状态"
            >
              <el-tag :type="goodsInfo?.status ? 'primary' : 'danger'">
                {{ goodsInfo?.status ? "正常" : "下架" }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item
              :label-width="100"
              align="center"
              label="商品类型"
            >
              {{ getGoodsTypeName(goodsInfo?.typeId) }}
            </el-descriptions-item>
            <el-descriptions-item
              :label-width="100"
              align="center"
              label="创建时间"
            >
              <el-text>{{ goodsInfo?.createTime }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item
              :label-width="100"
              :span="2"
              align="center"
              label="商品配置"
            >
              <el-space wrap>
                <el-text v-for="item in goodsInfo?.properties" :key="item.name">
                  {{ item.name }}:{{ item.value }}
                </el-text>
              </el-space>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-show="viewInfoVisible" shadow="never" style="margin: 10px 0">
      <el-descriptions :column="1" border class="margin-top">
        <template #title>
          <el-space>
            <el-text>规格信息</el-text>
            <el-text size="small" type="info">点击任一规格名修改</el-text>
          </el-space>
        </template>
        <template #extra>
          <el-button type="primary" @click="addSpec">添加规格信息</el-button>
        </template>
        <el-descriptions-item
          v-for="(item, i) in goodsSpecs"
          :key="item.value"
          :label="item.label"
          :label-width="200"
          align="center"
        >
          <template #label>
            <el-popover placement="bottom" trigger="hover">
              <template #reference>
                <el-text>{{ item.label }}</el-text>
              </template>
              <el-space>
                <el-button
                  :icon="Delete"
                  size="small"
                  title="删除规格"
                  type="danger"
                  @click="handleDelGoodsSpec(item)"
                />
                <el-button
                  :icon="Edit"
                  size="small"
                  title="修改规格"
                  type="primary"
                  @click="handleUpdateGoodsSpec(item)"
                />
              </el-space>
            </el-popover>
          </template>
          <el-space wrap>
            <el-tag
              v-for="tag in item.children"
              :key="tag"
              :disable-transitions="false"
              closable
              @click="handleUpdateGoodsSpec(tag)"
              @close="handleDelGoodsSpec(tag)"
            >
              {{ tag.label }}
            </el-tag>
            <el-input
              v-if="inputVisible && inputIndex === i"
              ref="InputRef"
              v-model="inputValue"
              class="w-20"
              size="small"
              @blur="handleInputConfirm(item.value)"
              @keyup.enter="handleInputConfirm(item.value)"
            />
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(i)"
            >
              添加子规格
            </el-button>
          </el-space>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 列表 -->
    <el-card shadow="never">
      <!-- 表格工具栏 -->
      <div class="toolbar">
        <!-- 左侧工具栏 -->
        <div>
          <el-button :icon="Plus" type="success" @click="openAddModel">
            新增
          </el-button>
          <el-button
            :disabled="removeIdList.length === 0"
            :icon="Delete"
            type="danger"
            @click="handleBatchDel"
          >
            删除
          </el-button>
        </div>
        <!-- 右侧工具栏 -->
        <div>
          <el-button
            :icon="Hide"
            circle
            title="隐藏信息及规格"
            @click="handleViewInfoAndSpec"
          />
          <el-button :icon="Refresh" circle title="刷新" @click="handleQuery" />

          <el-popover placement="bottom" trigger="click">
            <template #reference>
              <el-button :icon="Operation" circle title="筛选列" />
            </template>
            <el-scrollbar max-height="350px">
              <template v-for="col in cols" :key="col.props">
                <el-checkbox v-model="col.show" :label="col.label" />
              </template>
            </el-scrollbar>
          </el-popover>
        </div>
      </div>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        border
        highlight-current-row
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="50" />
        <el-table-column
          v-if="handleColShow(PropsEnum.id)"
          align="center"
          label="数据Id"
          prop="id"
          show-overflow-tooltip
          width="150"
        />
        <el-table-column
          v-if="handleColShow(PropsEnum.image)"
          align="center"
          label="商品图片"
          prop="image"
        >
          <template #default="scope">
            <el-image
              :preview-src-list="[scope.row.image]"
              :src="scope.row.image"
              preview-teleported
              style="width: 50px; border-radius: 5px"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow(PropsEnum.specList)"
          align="center"
          label="商品规格"
          prop="specList"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-text>{{ getSpecLable(scope.row) }}</el-text>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow(PropsEnum.price)"
          align="center"
          label="商品价格"
          prop="price"
          show-overflow-tooltip
          width="100"
        />
        <el-table-column
          v-if="handleColShow(PropsEnum.scope)"
          align="center"
          label="折扣"
          prop="scope"
          show-overflow-tooltip
          width="100"
        />
        <el-table-column
          v-if="handleColShow(PropsEnum.store)"
          align="center"
          label="库存"
          prop="store"
          show-overflow-tooltip
          width="100"
        />
        <el-table-column
          v-if="handleColShow(PropsEnum.reservedStore)"
          align="center"
          label="预存库存"
          prop="reservedStore"
          show-overflow-tooltip
          width="100"
        />
        <el-table-column
          v-if="handleColShow(PropsEnum.isSell)"
          align="center"
          label="售卖状态"
          prop="isSell"
          show-overflow-tooltip
          width="100"
        >
          <template #default="scope">
            <el-popconfirm
              :icon="InfoFilled"
              cancel-button-text="取消"
              confirm-button-text="确定"
              icon-color="#626AEF"
              title="确定要修改当前状态?"
              width="220"
              @confirm="switchStatus(scope.row)"
            >
              <template #reference>
                <el-switch
                  :model-value="scope.row.isSell == 1"
                  active-text="售卖"
                  class="ml-2"
                  inactive-text="下架"
                  inline-prompt
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #ff4949;
                  "
                />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow(PropsEnum.createTime)"
          align="center"
          label="创建时间"
          prop="createTime"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          v-if="handleColShow(PropsEnum.updateTime)"
          align="center"
          label="修改时间"
          prop="updateTime"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-tooltip
              class="box-item"
              content="编辑"
              effect="dark"
              placement="bottom"
            >
              <el-button
                :icon="Edit"
                circle
                size="small"
                type="primary"
                @click="handleEditShow(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="box-item"
              content="删除"
              effect="dark"
              placement="bottom"
            >
              <el-button
                :icon="Delete"
                circle
                size="small"
                type="danger"
                @click="handleDel(scope.row.id)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增弹窗-->
    <el-dialog
      v-model="addVisible"
      center
      destroy-on-close
      title="商品Sku新增"
      width="70%"
      @close="handleAddClose"
    >
      <!-- 滚动 -->
      <el-scrollbar max-height="60vh">
        <!-- 表单 -->
        <el-form
          ref="addFormRef"
          :model="addFormData"
          :rules="rules"
          label-width="auto"
          style="padding: 10px"
        >
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="商品图片" prop="image">
                <upload-image :limit="1" @update:url="handleAddImage" />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品价格" prop="price">
                <el-input-number
                  v-model="addFormData.price"
                  :precision="2"
                  :step="0.1"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品折扣" prop="scope">
                <el-input-number
                  v-model="addFormData.scope"
                  :max="1"
                  :min="0.1"
                  :precision="2"
                  :step="0.1"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品库存" prop="store">
                <el-input-number
                  v-model="addFormData.store"
                  :min="1"
                  :step="1"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品规格" prop="specList">
                <el-descriptions
                  :column="1"
                  border
                  class="margin-top"
                  size="small"
                >
                  <el-descriptions-item
                    v-for="(item, index) in (goodsSpecs as TreeVO)"
                    :key="item.value"
                    :label="item.label"
                    :label-width="150"
                    align="center"
                  >
                    <el-radio-group
                      v-model="addFormData.specList[index]"
                      size="small"
                    >
                      <el-radio-button
                        v-for="spec in item.children"
                        :key="spec.value"
                        :label="spec.label"
                        :value="spec.value"
                      />
                    </el-radio-group>
                  </el-descriptions-item>
                </el-descriptions>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div>
          <el-button type="primary" @click="handleAddSubmit">确 定</el-button>
          <el-button @click="handleAddClose">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑商品Sku弹窗-->
    <el-drawer
      v-model="editVisible"
      :before-close="handleEditClose"
      direction="rtl"
      size="60%"
    >
      <template #header="{ titleClass }">
        <div
          :class="titleClass"
          style="text-align: center; font-size: 20px; font-weight: bold"
        >
          商品Sku编辑
        </div>
      </template>
      <!-- 滚动 -->
      <el-scrollbar max-height="60vh">
        <!-- 表单 -->
        <el-form
          ref="editFormRef"
          :model="selectData"
          :rules="rules"
          label-width="auto"
          style="padding: 10px"
        >
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="商品图片" prop="image">
                <upload-image
                  :limit="1"
                  :urls="[selectData.image]"
                  @update:url="handleEditImage"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品价格" prop="price">
                <el-input-number
                  v-model="selectData.price"
                  :precision="2"
                  :step="0.1"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品折扣" prop="scope">
                <el-input-number
                  v-model="selectData.scope"
                  :max="1"
                  :min="0.1"
                  :precision="2"
                  :step="0.1"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品库存" prop="store">
                <el-input-number
                  v-model="selectData.store"
                  :min="1"
                  :step="1"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="商品规格" prop="specList">
                <el-descriptions
                  :column="1"
                  border
                  class="margin-top"
                  size="small"
                >
                  <el-descriptions-item
                    v-for="(item, index) in (goodsSpecs as TreeVO)"
                    :key="item.value"
                    :label="item.label"
                    :label-width="150"
                    align="center"
                  >
                    <el-radio-group
                      v-model="selectData.specList[index]"
                      size="small"
                    >
                      <el-radio-button
                        v-for="spec in item.children"
                        :key="spec.value"
                        :label="spec.label"
                        :value="spec.value"
                      />
                    </el-radio-group>
                  </el-descriptions-item>
                </el-descriptions>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div>
          <el-button type="primary" @click="handleEditSumbit">确 定</el-button>
          <el-button @click="handleEditClose">取 消</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import {
  Delete,
  Edit,
  Hide,
  InfoFilled,
  Operation,
  Plus,
  Refresh,
} from "@element-plus/icons-vue";
import { nextTick, ref } from "vue";
import {
  GoodsControllerService,
  GoodsSkuControllerService,
  GoodsSkuInsertDTO,
  GoodsSkuVO,
  GoodsSpecControllerService,
  GoodsTypeControllerService,
  GoodsTypeOption,
  GoodsVO,
  TreeVO,
} from "@/api";

import { ElMessage, ElMessageBox, InputInstance } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import UploadImage from "@/components/UploadImage.vue";

/**
 * 查询搜索开始
 */
//获取商品Id参数
const router = useRouter();
const route = useRoute();
const goodsId = ref(0);
if (!route.params.goodsId) {
  ElMessage.warning("没有商品ID");
  router.back();
}
goodsId.value = route.params?.goodsId;
// 查询商品基本信息
const goodsInfo = ref<GoodsVO>();

function getGoodsInfo() {
  GoodsControllerService.getGoodsInfoByIdUsingGet(goodsId.value).then((res) => {
    goodsInfo.value = res.data;
  });
}

getGoodsInfo();
// 查询商品规格信息
const goodsSpecs = ref<TreeVO[]>();

function getGoodsSpec() {
  GoodsSpecControllerService.getGoodsSpecAllUsingGet(goodsId.value).then(
    (res) => {
      goodsSpecs.value = res.data || [];
      init.specList = [];
      goodsSpecs.value?.forEach((item) => {
        if (item.children?.length > 0) {
          init.specList.push(item.children[0].value);
          return;
        }
        init.specList.push(item.value);
      });
      // 获取规格后再查询sku数据
      handleQuery();
    }
  );
}

getGoodsSpec();

// 获取商品标签
function getSpecLable(row: GoodsSkuVO) {
  const result = [];
  for (let i = 0; i < row.specList?.length; i++) {
    //获取该ID对应的标签数据
    const data = goodsSpecs.value[i].children.find(
      (spec) => spec.value === row.specList[i]
    );
    //存入label
    result.push(data.label);
  }
  return result.join(",");
}

//添加一级规格
function addSpec() {
  ElMessageBox.prompt("请输入一级规格名", "提醒", {
    confirmButtonText: "提交",
    cancelButtonText: "取消",
  })
    .then(({ value }) => {
      GoodsSpecControllerService.insertGoodsSpecUsingPost({
        goodsId: goodsId.value,
        specName: value,
      }).then((res) => {
        ElMessage.success(res.data);
        // 刷新规格
        getGoodsSpec();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消添加",
      });
    });
}

//查询sku事件
function handleQuery() {
  GoodsSkuControllerService.getGoodsSkuAllUsingGet(goodsId.value).then(
    (res) => {
      tableData.value = res.data || [];
    }
  );
}

//查询的数据
const tableData = ref<GoodsSkuVO[]>([]); // 数据集合

/**
 * 查询数据结束
 */

const rules = {
  title: [{ required: true, message: "请输入标题", trigger: "change" }],
  toNum: [{ required: true, message: "请选择接收端", trigger: "blur" }],
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
}; // 表单规则
//新增规格
const inputValue = ref("");
const inputVisible = ref(false);
const inputIndex = ref<number>(1);
const InputRef = ref<InputInstance>();

//删除标签
const handleDelGoodsSpec = (tag: TreeVO) => {
  if (tag.children) {
    ElMessage.warning("请删除子规格后再删除一级规格");
    return;
  }
  ElMessageBox.confirm("确认要删除该规格吗?", "温馨提醒", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      GoodsSpecControllerService.delGoodsSpecUsingDelete(goodsId.value, [
        tag.value as number,
      ]).then((res) => {
        ElMessage.success(res.data);
        //刷新数据
        getGoodsSpec();
      });
    })
    .catch(() => {
      ElMessage.info("取消删除");
    });
};

// 修改标签
function handleUpdateGoodsSpec(tag: TreeVO) {
  ElMessageBox.prompt(`原名：${tag.label} ，请输入新的规格名`, "商品规格修改", {
    confirmButtonText: "提交",
    cancelButtonText: "取消",
  })
    .then(({ value }) => {
      GoodsSpecControllerService.updateGoodsSpecUsingPut({
        id: tag.value,
        specName: value,
      }).then((res) => {
        ElMessage.success(res.data);
        // 刷新规格
        getGoodsSpec();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消添加",
      });
    });
}

const showInput = (index: number) => {
  inputVisible.value = true;
  inputIndex.value = index;
  nextTick(() => {
    InputRef.value[0]!.focus();
  });
};

const handleInputConfirm = (parentId: number) => {
  if (inputValue.value) {
    GoodsSpecControllerService.insertGoodsSpecUsingPost({
      goodsId: goodsId.value,
      specName: inputValue.value,
      parentId: parentId,
    }).then((res) => {
      ElMessage.success(res.data);
      //刷新规格
      getGoodsSpec();
    });
  }
  inputVisible.value = false;
  inputValue.value = "";
};

/**
 * 工具栏开始
 *
 */
// 1、新增开始
const init = {
  goodsId: goodsId.value,
  /**
   * 商品图片
   */
  image: "",
  /**
   * 商品价格
   */
  price: 0,
  /**
   * 商品折扣
   */
  scope: 1,
  /**
   * 商品规格集合
   */
  specList: [],
  /**
   * 库存
   */
  store: 0,
};
const addVisible = ref(false); //新增弹窗显示
const addFormData = ref<GoodsSkuInsertDTO>({ ...init }); //添加表单数据
const addFormRef = ref(); //新增表单对象
// 打开弹窗
function openAddModel() {
  addFormData.value = JSON.parse(JSON.stringify(init));
  addVisible.value = true;
}

//关闭弹窗事件
function handleAddClose() {
  if (addVisible.value) {
    ElMessageBox.confirm("确定要关闭弹窗吗？")
      .then(() => {
        addVisible.value = false;
      })
      .catch(() => {
        ElMessage.info("取消了关闭弹窗");
      });
  }
}

// 新增上传文件
function handleAddImage(urls: string[]) {
  addFormData.value.image = urls[0];
}

//新增提交事件
async function handleAddSubmit() {
  console.log(addFormRef.value);
  //校验
  await addFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      GoodsSkuControllerService.insertGoodsSkuUsingPost(addFormData.value).then(
        (res) => {
          handleQuery();
          ElMessage.success(res.data);
          addVisible.value = false;
        }
      );
    }
  });
}

// 1、新增结束
// 2、批量删除开始
const selectionList = ref<Array<GoodsSkuVO>>(); //选中的数据集合
const removeIdList = ref<number[]>([]); //选中的数据Id集合
function handleSelectionChange(value: GoodsSkuVO[]) {
  console.log("选中的数据", value);
  selectionList.value = value;
  //获取选中的数据id
  removeIdList.value = value.map((item) => item.id!);
}

//批量删除事件
function handleBatchDel() {
  ElMessageBox.confirm(
    "确定要删除选中的" + removeIdList.value?.length + "条数据吗？",
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      GoodsSkuControllerService.delGoodsSkuUsingDelete(removeIdList.value).then(
        (res) => {
          ElMessage.success(res.data);
          handleQuery();
        }
      );
    })
    .catch(() => {
      ElMessage.info("取消删除！");
    });
}

// 2、批量删除结束
// 隐藏信息及规格
const viewInfoVisible = ref(true);

function handleViewInfoAndSpec() {
  viewInfoVisible.value = !viewInfoVisible.value;
}

// 6、筛选列开始
enum PropsEnum {
  id,
  image,
  price,
  reservedStore,
  scope,
  specList,
  status,
  isSell,
  updateTime,
  createTime,
}

//列数据
const cols = ref([
  {
    label: "数据Id",
    props: PropsEnum.id,
    show: false,
  },
  {
    label: "商品图片",
    props: PropsEnum.image,
    show: true,
  },
  {
    label: "商品规格",
    props: PropsEnum.specList,
    show: true,
  },
  {
    label: "商品价格",
    props: PropsEnum.price,
    show: true,
  },
  {
    label: "商品折扣",
    props: PropsEnum.scope,
    show: true,
  },
  {
    label: "库存",
    props: PropsEnum.store,
    show: true,
  },
  {
    label: "预存库存",
    props: PropsEnum.reservedStore,
    show: true,
  },
  {
    label: "是否售卖",
    props: PropsEnum.isSell,
    show: true,
  },
  {
    label: "创建时间",
    props: PropsEnum.createTime,
    show: false,
  },
  {
    label: "修改时间",
    props: PropsEnum.updateTime,
    show: false,
  },
]);

//列展示处理
function handleColShow(prop: PropsEnum) {
  return cols.value.filter((col) => col.props === prop)[0].show;
}

// 6、筛选列结束
/**
 * 工具栏结束
 * 表格操作开始
 */

// 1、修改商品Sku状态开始
const switchStatus = (row: any) => {
  const status = row.isSell === 1 ? 0 : 1;
  GoodsSkuControllerService.updateGoodsSkuStaticUsingPut({
    id: row.id,
    status: status,
  }).then((res) => {
    ElMessage.success(res.data);
    handleQuery();
  });
};
// 1、修改商品Sku状态结束
// 选中的数据
const selectData = ref<GoodsSkuVO>({});

// 3、编辑商品Sku内容开始
const editVisible = ref(false); //编辑弹窗显示标志
const editFormRef = ref(); //编辑表单对象
// 打开展示弹窗
function handleEditShow(row: GoodsSkuVO) {
  selectData.value = { ...row };
  editVisible.value = true;
}

//关闭展示弹窗
function handleEditClose() {
  ElMessageBox.confirm("确定要关闭吗？")
    .then(() => {
      editVisible.value = false;
    })
    .catch(() => {
      // catch error
    });
}

// 编辑上传文件
function handleEditImage(urls: string[]) {
  selectData.value.image = urls[0];
}

function handleEditSumbit() {
  editFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      GoodsSkuControllerService.updateGoodsSkuUsingPut(selectData.value).then(
        (res) => {
          handleQuery();
          ElMessage.success(res.data);
          editVisible.value = false;
        }
      );
    }
  });
}

// 3、编辑商品Sku内容结束
// 4、删除一条商品Sku数据

const handleDel = (id: number) => {
  if (!id) {
    ElMessage.warning("请选择数据后再删除！");
    return;
  }
  //删除数据
  GoodsSkuControllerService.delGoodsSkuUsingDelete([id]).then((res) => {
    ElMessage.success(res.data);
    handleQuery();
  });
};

//获取商品分类
const goodsTypeList = ref<Array<GoodsTypeOption>>();

function getGoodsType() {
  GoodsTypeControllerService.getGoodsTypeOptionUsingGet().then((res) => {
    goodsTypeList.value = res.data;
  });
}

getGoodsType();

function getGoodsTypeName(list: number[]) {
  if (!list || list.length === 0) return "无";
  //查找父分类
  const goodsType: GoodsTypeOption =
    goodsTypeList.value?.find((item) => item.value === list[0]) || {};
  let str = goodsType.label;
  if (list.length > 1) {
    //查找子分类
    const ch: GoodsTypeOption =
      goodsType.children?.find((item) => item.value === list[1]) || {};
    str = str + " / " + ch.label;
  }
  return str;
}
</script>

<style lang="scss" scoped>
#goodsSkuManage {
  .toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .pagination {
    margin-top: 12px;
  }
}
</style>
